// For debug output to console
Canvas.debug = false;

function Canvas() {
	this.dprint("CanvasV2 Constructor");
	
	this.isMakingShape = false;
	
	var baseObj = new CanvasObject();
	baseObj.setAttribute("width",500);
	baseObj.setAttribute("height", 500);
	baseObj.setAttribute("x", 0);
	baseObj.setAttribute("y", 0);
	
	baseObj.setAttribute("background", "white");
	baseObj.setAttribute("opacity", "1.0");
	//baseObj.setCss("opacity", "1.0");
	
	this.rootObject = baseObj;
	this.setBaseObject(baseObj);
	
	this.selectedObject = null;	
	
	this.initMouseControls();
	this.initKeyboardControls();
}

Canvas.className = "Canvas";

// Singleton instance
Canvas._theCanvas = null;
function theCanvas() { return Canvas._theCanvas; }
//Canvas.theCanvas = function() { return _theCanvas; };


Canvas.attributes = new Array(
	//{name: "id", value: "canvas"},
	{name: "width", cssName: "width", value: 500},
	{name: "height", cssName: "height", value: 500},
	{name: "background", cssName: "background", value: "transparent"},
	{name: "backgroundImage", cssName: "background-image", value: ""}
);

Canvas.prototype.initDomElem = function() {
	
};

Canvas.prototype.initMouseControls = function() {
	$("#canvas_container").click(function() {
		theCanvas().getBaseObject().setSelectedObject(null);
	});
}

Canvas.prototype.initKeyboardControls = function() {
	var obj = this;
	$(document).keydown(function(e) {
		//obj.dprint("keydown");
		if (e.keyCode == 38) {
			if (obj.baseObject.parent != null) {
				obj.dprint("Go up");
				obj.setBaseObject(obj.baseObject.parent);
			}
		} else if (e.keyCode == 40) {
			if (obj.getSelectedObject() != null) {
				obj.dprint("Go down");
				obj.setBaseObject(obj.baseObject.getSelectedObject());
			}
		} else if (e.keyCode == 46) {
			obj.baseObject.removeObject(obj.baseObject.getSelectedObject());
		} /* else if (e.keyCode == 61) { // Create new object
			theCanvas().beginCreatingShape();
		} else if (e.keyCode == 49) {
			theCanvas().beginCreatingShape("input type='text'");
		} */
	});
};

Canvas.prototype.dumpHtml = function() {
	this.dprint("STUB: dumpHtml");
	
	
	
	// pre tag keeps string properly formatted
	// return "<pre>" + escapeHtml(this.dumpCss()) + escapeHtml(this.dumpRawHtml()) + "</pre>";
};

Canvas.prototype.setBaseObject = function(baseObj) {

	// Reset cur doc name so don't save sub layer as super layer
	curDocName = "";


	this.dprint("Set base object: " + baseObj.id);

	if (this.baseObject != null && this.baseObject != undefined) {
	
		this.baseObject.domElem.unbind("click");
	
		this.baseObject.domElem.toggleClass("canvas");
		this.baseObject.domElem.toggleClass("object");
		
		// This object is no longer our canvas
		for (var i in this.baseObject.children) {
			this.baseObject.children[i].disableClickHandlers();
		 }
		
		if (this.baseObject.parent != null) {
			this.baseObject.parent.domElem.append(this.baseObject.domElem);
		}
		
		// set domElem's top and left values back to their actual values
		this.baseObject.domElem.css("top", this.baseObject.y + "px");
		this.baseObject.domElem.css("left", this.baseObject.x + "px");
	}

	
	this.baseObject = baseObj;
	
	var topVal = ($("#canvas_container").height() - this.baseObject.height) / 2;
	var leftVal = ($("#canvas_container").width() - this.baseObject.width) / 2;
	
	this.dprint("container: " + $("#canvas_container").height() );
	this.dprint("canvas   : " + this.baseObject.height );
	this.dprint("topVal   : " + topVal);
	
	this.dprint("container: " + $("#canvas_container").width() );
	this.dprint("canvas   : " + this.baseObject.width );
	this.dprint("leftVal   : " + leftVal);
	
	this.baseObject.domElem.css("top", topVal+"px");
	this.baseObject.domElem.css("left", leftVal+"px");
	
	$("#canvas_container").empty();
	$("#canvas_container").append(this.baseObject.domElem);
		
	this.dprint("setting click handler");
	var obj = this;
	baseObj.domElem.click(function() {
		obj.dprint("click");
		obj.baseObject.setSelectedObject(null);
	});

	baseObj.domElem.toggleClass("canvas");
	baseObj.domElem.toggleClass("object");
	for (var i in this.baseObject.children) {
		this.baseObject.children[i].enableClickHandlers();
	}
	
	this.baseObjectChanged();
}

Canvas.prototype.getBaseObject = function(baseObj) {
	return this.baseObject;
}

Canvas.prototype.beginCreatingShape = function(type) {
	this.dprint("beginCreatingShape: " + type);
	this.domElem.toggleClass("creating", true);
	this.isMakingShape = true;
	
	if (type == undefined) {
		this.isMakingType = "div";
	} else  {
		this.isMakingType = type;
	}
};

Canvas.prototype.endCreatingShape = function() {
	this.dprint("endCreatingShape");

	this.isMakingShape = false;
	this.domElem.toggleClass("creating", false);
	//this.addObject(this.shapeBeingMade);
	this.shapeBeingMade = undefined;
	this.isMakingType = undefined;
	this.anchorPoint = undefined;
};

Canvas.prototype.getSelectedObject = function() {
	return this.baseObject.getSelectedObject();
};
/*
Canvas.prototype.setSelectedObject = function(o) {
	
	this.dprint("setSelectedObject: " + o);
	
	if (this.selectedObject != null) {
		this.dprint("selectedObject was null before");	
		this.selectedObject.setIsSelected(false);
		this.selectedObject = null;
	}
	
	if (o == null) {
		this.dprint("set selected to null");
	} else {
	
		var obj = this.objects[o.id];
		if (obj == this.selectedObject) {
			//this.dprint("object already selected");
			//return;
		}
		
		//this.dprint("setSelectedObject: " + obj);
		this.selectedObject = obj;
		obj.setIsSelected(true);
	
	}
	
	this.selectedChanged();
};
*/

Canvas.prototype.selectedChanged = function() {
	theControlPanel().fullRefresh();
}

Canvas.prototype.valueChanged = function() {
	this.dprint("valueChanged");
	
	// Handles case where is called from constructor
	if (theCanvas() != null) {
		theControlPanel().fullRefresh();
		//updateControlPanel();
	}
};

Canvas.prototype.baseObjectChanged = function() {
	theControlPanel().updateNavMap();
	theControlPanel().fullRefresh();
}

// Debug output to console
Canvas.prototype.dprint = function(str) {
	if (Canvas.debug) {
		cprint(Canvas.className + ": " + str, "#00ff00");
	}
};

